<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-tag><span style="font-weight: bold;font-size: 20px">我的奖惩记录</span></el-tag>
    </div>
    <el-table :data="rewardList" style="width: 100%;" border>
      <el-table-column align="center" prop="rewardDate" label="奖励时间">
        <template slot-scope="scope">
          <el-date-picker readonly v-model="scope.row.rewardDate" type="date" placeholder="奖励时间"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="money" label="奖金" >
        <template slot-scope="scope">
          {{ scope.row.money }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reason" label="原因">
        <template slot-scope="scope">
          {{ scope.row.reason }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="remark" label="结果">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" disabled style="margin-left: 10px;width: 80%" placeholder="奖惩类型">
            <el-option
              v-for="status in rewardTypeEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="remark" label="状态">
        <template slot-scope="scope">
          <el-select v-model="scope.row.status" disabled style="margin-left: 10px;width: 80%" placeholder="状态">
            <el-option
              v-for="status in statusEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getMyReward } from '@/api/reward'
const defaultReward = {
  id: ''
}

export default {
  name: 'RewardMine',
  components: {},
  data() {
    return {
      reward: Object.assign({}, defaultReward),
      rewardList: [],
      statusEnum: [
        {value: 'FALSE', label: "已生效"},
        {value: 'TRUE', label: "未生效"},
      ],
      rewardTypeEnum: [
        {value: 'INTERN', label: "实习生优秀奖"},
        {value: 'FULL', label: "全勤奖"},
        {value: 'CREDIT', label: "突出功绩奖"},
        {value: 'ABSENCE', label: "缺勤惩罚"},
        {value: 'OTHER', label: "其他"},
      ]
    };
  },
  //方法集合
  methods: {
    async getRewards(){
      getMyReward().then((res) => {
        this.rewardList = res.data
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getRewards()
  }
}
</script>

<style scoped>
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
